<template>
  <div>
    <div class="index-hot-3YxK2">
      <div class="index-header-2Bh4c">
        <div class="index-tabshow-3XEdJ">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="主播吧排行榜" name="first" ></el-tab-pane>
            <el-tab-pane label="游戏吧排行榜" name="second"></el-tab-pane>
          </el-tabs>
          <div class="index-specilPart-H1Y5k">
            <div class="index-otherPart-1G7ad">
              <router-view></router-view>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: ''
    };
  },
  methods: {
    handleClick() {
      if(this.activeName == "first"){
          this.$router.push("/hotanchor");
      }
      if (this.activeName == "second"){
        this.$router.push("/game")
      }
    }
  }
};
</script>

<style scoped>

.index-hot-3YxK2 {
  width: 100%;
  min-height: 1080px;
  margin: 0 auto;
  background-image: url(https://wbstatic.douyu.com/images/30c3bf560da7528af89f99fb6c022dbd.png);
  background-size: 2010px 1110px;
  background-color: #ff843b;
  background-position: top;
  background-repeat: repeat-x;
  /*position: absolute;*/
}

.index-header-2Bh4c {
  width: 747px;
  height: 60px;
  margin: 0 auto;
  padding-left: 400px;
}

.index-tabshow-3XEdJ {
  float: left;
  /*width: 226px;*/
  margin-top: 32px;
  /*margin-right: 80px;*/
  color: #fff;
  /*font-size: 20px;*/
  /*text-align: center;*/
  /*font-weight: 600;*/
  /*line-height: 18px;*/
  /*cursor: pointer;*/
}

.index-specilPart-H1Y5k {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 83px;
  margin-top: 90px;
}
.index-otherPart-1G7ad {
  clear: both;
  position: relative;
  min-height: 740px;
  width: 1000px;
  background: #fff;
  border-radius: 12px;
  padding-top: 20px;
  /*padding-left: 20px;*/
  margin-right: -500px;
  margin-left: -350px;

}
</style>
<style>
.el-tabs__item {
  font-size: 20px !important;
  padding: 10px 0 50px !important;
  width: 150px !important;
  margin-top: 10px;
  /*margin-left: 30px;*/
  font-weight: 600;
  line-height: 50px;
}


</style>
